<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.2.5.1.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <component-a></component-a>
    </div>
    <div id='app2'>
        <p>与Vue l.x 不同的是， Vue 2.x 将v-el 和v-ref 合并为了 ref, Vue 会自动去判断是普通标签还是组件</p>
        <p ref='p'>内容</p>
        <child-component ref='child'></child-component>
    </div>
    <script>
        // 这种方法巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级，而且 Vue 1.x和Vue 2.x 都适用。

        // 如果深入使用，可以扩展 bus 实例，给它添加 data methods computed 等选工页，
        // 这些都是可以公用的，在业务中，尤其是协同开发时非常有用，因为经常需要共享 些通用的信息，
        // 比如用户登录的昵称、性别、邮箱等，还有用户的授权 token 等。只需在初始化时让 bus 获取 次，
        // 任何时间、任何组件就可以从中直接使用了，在单页面富应用（ SPA ）中会很实用，我们会在进阶
        // 篇里逐步介绍这些内容。
        var bus = new Vue();
        Vue.component('component-a', {
            template: '<button @click="handleEvent">传递事件</button>',
            data() {
                return {
                    a: 0
                }
            },
            methods: {
                handleEvent() {
                    bus.$emit('on-message', '来自组件component-a的内容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: '11'
            },
            mounted() {
                var _this = this;
                // 在实例初始化时， 监听来自 bus 实例的事件
                bus.$on('on-message', function(msg) {
                    console.log(msg);
                    _this.message = msg;
                })
            }
        })
    </script>
</body>

</html>